/* Web字体定义和加载优化 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* 字体显示优化 */
@font-face {
    font-family: 'OptimizedMono';
    src: local('JetBrains Mono'), 
         local('Fira Code'), 
         local('Source Code Pro'),
         local('SF Mono'),
         local('Consolas');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

/* 字体CSS变量定义 */
:root {
    /* 主要字体族 */
    --font-family-mono: 
        'OptimizedMono',
        'JetBrains Mono', 
        'Fira Code', 
        'Source Code Pro',
        'SF Mono',
        'Monaco',
        'Inconsolata',
        'Roboto Mono',
        'Ubuntu Mono',
        'Consolas',
        'Courier New', 
        monospace;
    
    /* 中英文混合字体 */
    --font-family-mixed: 
        'PingFang SC', 
        'Microsoft YaHei', 
        'Source Han Sans SC',
        var(--font-family-mono);
    
    /* 字体大小 */
    --font-size-formula: clamp(13px, 2.5vw, 15px);
    --font-size-formula-mobile: 13px;
    
    /* 行高 */
    --line-height-formula: 1.8;
    --line-height-formula-mobile: 1.7;
    
    /* 字符间距 */
    --letter-spacing-formula: 0.02em;
    --word-spacing-formula: 0.05em;
    
    /* 字体颜色 */
    --color-formula-text: #1a202c;
    --color-formula-text-dark: #e2e8f0;
    
    /* 文本阴影 */
    --text-shadow-light: 
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.1);
    --text-shadow-dark: 
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3);
    --text-shadow-retina: 
        0 0.5px 0 rgba(255, 255, 255, 0.9),
        0 0.5px 1px rgba(0, 0, 0, 0.08);
}

/* Reset and Base Styles */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background-color: #f5f7fa; 
}

/* Layout Styles */
.app-container { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

.header { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    padding: 1rem 2rem; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.header h1 { 
    font-size: 1.8rem; 
    font-weight: 600; 
}

.main-content { 
    flex: 1; 
    display: flex; 
}

.sidebar { 
    width: 250px; 
    background: white; 
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); 
    padding: 1rem 0; 
}

.menu-item { 
    display: block; 
    padding: 0.8rem 1.5rem; 
    color: #606266; 
    cursor: pointer; 
    border-left: 3px solid transparent; 
    transition: all 0.3s; 
}

.menu-item:hover { 
    background-color: #f5f7fa; 
    color: #409eff; 
}

.menu-item.active { 
    background-color: #ecf5ff; 
    color: #409eff; 
    border-left-color: #409eff; 
}

.content-area { 
    flex: 1; 
    padding: 2rem; 
    overflow-y: auto; 
}

.page-title { 
    font-size: 1.5rem; 
    font-weight: 600; 
    color: #303133; 
    margin-bottom: 1.5rem; 
    border-bottom: 2px solid #409eff; 
    padding-bottom: 0.5rem; 
}

/* 内容头部和操作区域布局 */
.content-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.content-actions .btn {
    margin: 0;
}

/* Card and Form Styles */
.card { 
    background: white; 
    border-radius: 8px; 
    box-shadow: 0 2px 12px rgba(0,0,0,0.1); 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
}

.form-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 1rem; 
}

/* ================================ V3策略配置页面样式 ================================ */

/* 主布局 - 两栏结构 */
.v3-config-layout {
    display: flex;
    gap: 16px;
    min-height: 650px;
    background: #f5f7fa;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* 左侧策略列表面板 */
.v3-left-panel {
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e8eb;
    overflow: hidden;
}

/* 右侧内容容器 - 包含地区配置和计费规则的上下布局 */
.v3-right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 650px;
}

/* 地区显示面板 - 移到右侧上方 */
.v3-center-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e8eb;
    overflow: hidden;
    flex: 0 0 55%; /* 增加到55%高度给地区配置更多空间 */
    min-height: 320px;
    max-height: 420px;
}

/* 计费规则面板 - 移到右侧下方 */
.v3-right-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e8eb;
    overflow: hidden;
    flex: 1; /* 占用剩余空间 */
    min-height: 200px;
}

/* 面板头部样式 */
.v3-config-layout .panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e6e8eb;
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.v3-config-layout .panel-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2329;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v3-config-layout .panel-header h4::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #409eff, #66b1ff);
    border-radius: 2px;
}

.v3-config-layout .panel-subtitle {
    font-size: 12px;
    color: #86909c;
    margin-left: 12px;
    padding: 2px 8px;
    background: #f2f3f5;
    border-radius: 8px;
}

/* 面板内容样式 */
.v3-config-layout .panel-content {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
}

/* 空状态样式 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #86909c;
    font-size: 14px;
    background: #fafbfc;
    margin: 20px;
    border: 2px dashed #d0d7de;
    border-radius: 8px;
    text-align: center;
}

.empty-state::before {
    content: '📋';
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* ================================ 策略列表项样式 ================================ */

.strategy-item {
    margin: 12px 16px;
    padding: 16px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.strategy-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
    border-color: #409eff;
}

.strategy-item.selected {
    background: linear-gradient(135deg, #ecf5ff 0%, #e1f3ff 100%);
    border-color: #409eff;
    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
    transform: translateY(-1px);
}

.strategy-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #409eff, #66b1ff);
    border-radius: 0 4px 4px 0;
}

.strategy-item .strategy-info {
    margin-bottom: 12px;
}

.strategy-item .strategy-name {
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.strategy-item.selected .strategy-name {
    color: #409eff;
}

.strategy-item .strategy-name::before {
    content: '📄';
    font-size: 14px;
    opacity: 0.7;
}

.strategy-item .strategy-time {
    font-size: 12px;
    color: #86909c;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.strategy-item .strategy-time::before {
    content: '🕒';
    font-size: 11px;
}

.strategy-item .strategy-note {
    font-size: 12px;
    color: #4e5969;
    line-height: 1.4;
    max-height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.strategy-item .strategy-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.strategy-item .strategy-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.strategy-item .strategy-actions .btn-primary {
    background: linear-gradient(135deg, #409eff, #66b1ff);
    border: none;
    color: white;
    font-weight: 500;
}

.strategy-item .strategy-actions .btn-primary:hover {
    background: linear-gradient(135deg, #337ecc, #5dade2);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(64, 158, 255, 0.3);
}

/* ================================ 地区显示样式 ================================ */

.area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #e6e8eb;
}

.area-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2329;
}

.area-header .btn {
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #67c23a, #85ce61);
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.area-header .btn:hover {
    background: linear-gradient(135deg, #5daf34, #7cc142);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(103, 194, 58, 0.3);
}

.area-content {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100% - 120px);
    overflow-y: auto;
}

/* 地区分组样式 */
.area-group {
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: white;
}

.area-group:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #d0d7de;
}

.area-group-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    padding: 12px 16px;
    border-bottom: 1px solid #e6e8eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-group-header .province-name {
    font-weight: 600;
    color: #1f2329;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.area-group-header .province-name::before {
    content: '🏢';
    font-size: 12px;
}

.area-group-header .area-count {
    font-size: 11px;
    color: #67c23a;
    background: linear-gradient(135deg, #f0f9ff, #e1f3ff);
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid #b3d8ff;
    font-weight: 500;
}

.area-group-content {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fafbfc;
}

.area-tag {
    background: linear-gradient(135deg, #e7f3ff, #d9ecff);
    color: #409eff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid #b3d8ff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.area-tag:hover {
    background: linear-gradient(135deg, #d9ecff, #cce7ff);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
}

.area-tag::before {
    content: '📍';
    font-size: 10px;
}

.area-tag .area-name {
    font-weight: 500;
}

/* 空地区样式 */
.empty-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: #86909c;
    font-size: 14px;
    background: #fafbfc;
    border: 2px dashed #d0d7de;
    border-radius: 8px;
    text-align: center;
    line-height: 1.6;
}

.empty-area::before {
    content: '🗺️';
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.6;
}

/* ================================ 计费规则表格样式 ================================ */

.pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #e6e8eb;
}

.pricing-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2329;
}

.pricing-header .btn {
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #409eff, #66b1ff);
    color: white;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pricing-header .btn:hover {
    background: linear-gradient(135deg, #337ecc, #5dade2);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(64, 158, 255, 0.3);
}

.pricing-content {
    padding: 16px 20px;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    background: white;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.pricing-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    color: #4e5969;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 2px solid #e6e8eb;
    border-right: 1px solid #e6e8eb;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-table th:last-child {
    border-right: none;
}

.pricing-table th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #409eff, #66b1ff);
}

.pricing-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f5f7fa;
    border-right: 1px solid #f5f7fa;
    vertical-align: middle;
    font-size: 12px;
    color: #4e5969;
    transition: all 0.2s ease;
}

.pricing-table td:last-child {
    border-right: none;
}

.pricing-table tbody tr {
    transition: all 0.2s ease;
}

.pricing-table tbody tr:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #f5f7fa 100%);
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.pricing-table tbody tr:hover td {
    color: #1f2329;
    font-weight: 500;
}

.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

/* 重量范围单元格 */
.pricing-table .weight-range-cell {
    background: linear-gradient(135deg, #e7f3ff 0%, #f0f9ff 100%);
    color: #409eff;
    font-weight: 600;
    border-left: 3px solid #409eff;
}

/* 金额单元格 */
.pricing-table .price-cell {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    color: #f56c6c;
}

.pricing-table .price-cell::before {
    content: '¥';
    color: #86909c;
    margin-right: 2px;
}

/* 空规则样式 */
.empty-rules {
    text-align: center;
    padding: 40px 20px;
    color: #86909c;
    font-size: 14px;
    background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
    border: 2px dashed #d0d7de;
    border-radius: 8px;
    margin: 16px;
    position: relative;
}

.empty-rules::before {
    content: '📊';
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .v3-config-layout {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    
    .v3-left-panel {
        width: 100%;
        min-width: auto;
    }

    .v3-right-container {
        width: 100%;
    }
    
    .v3-center-panel,
    .v3-right-panel {
        width: 100%;
        min-width: auto;
    }
    
    .pricing-table {
        font-size: 11px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    .v3-config-layout {
        padding: 12px;
        gap: 8px;
    }
    
    .strategy-item {
        margin: 8px 12px;
        padding: 12px;
    }
    
    .area-content,
    .pricing-content {
        padding: 12px 16px;
    }
    
    .pricing-table {
        font-size: 10px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 6px 4px;
    }

    /* 小屏幕下右侧容器保持垂直布局 */
    .v3-right-container {
        flex-direction: column;
    }

    .v3-center-panel {
        min-height: 200px;
    }
}

.pricing-table th,
.pricing-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #ebeef5;
    vertical-align: middle;
}

.pricing-table th {
    background: #f5f7fa;
    color: #909399;
    font-weight: 600;
    font-size: 12px;
}

.pricing-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.pricing-table tbody tr:hover {
    background: #ecf5ff;
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #909399;
    font-size: 14px;
}

.empty-area {
    text-align: center;
    padding: 1rem;
    color: #c0c4cc;
    font-size: 13px;
    font-style: italic;
}

.empty-rules {
    text-align: center;
    color: #c0c4cc;
    font-style: italic;
    padding: 1rem 0;
}

/* V3策略编辑模态框样式 */
.v3-strategy-edit-modal {
    max-width: 1200px;
    width: 90vw;
}

.v3-strategy-edit-layout {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.v3-shipping-areas-section {
    flex: 1;
    min-width: 400px;
}

.v3-pricing-rules-section {
    flex: 2;
    min-width: 600px;
}

.v3-shipping-areas-section h4,
.v3-pricing-rules-section h4 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e4e7ed;
    color: #303133;
    font-weight: 600;
}

/* V3区域选择器样式 */
.v3-areas-selector {
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 1rem;
}

.areas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.selected-count {
    font-size: 14px;
    color: #606266;
    background: #f0f9ff;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    border: 1px solid #b3d8ff;
}

.selected-areas-display {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 0.5rem;
}

.selected-areas-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-areas-tags .area-tag {
    background: #e1f3d8;
    color: #67c23a;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #b3d8a0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-remove-btn {
    background: none;
    border: none;
    color: #f56c6c;
    cursor: pointer;
    font-weight: bold;
    padding: 0;
    margin-left: 0.3rem;
}

.tag-remove-btn:hover {
    color: #e6a23c;
}

/* V3计费规则编辑器样式 */
.v3-pricing-rules-editor {
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    overflow: hidden;
}

.v3-pricing-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.v3-pricing-edit-table th,
.v3-pricing-edit-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #ebeef5;
    vertical-align: middle;
}

.v3-pricing-edit-table th {
    background: #f5f7fa;
    color: #909399;
    font-weight: 600;
    font-size: 12px;
}

.table-input {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font-size: 12px;
    text-align: center;
}

.table-input:focus {
    border-color: #409eff;
    outline: none;
}

.rule-actions {
    padding: 1rem;
    background: #fafbfc;
    border-top: 1px solid #ebeef5;
    text-align: center;
}

.rule-actions .form-hint {
    display: block;
    margin-top: 0.5rem;
    color: #909399;
    font-size: 12px;
}

/* V3区域选择器模态框 */
.v3-area-selector-modal {
    max-width: 800px;
    width: 80vw;
}

.v3-area-selector-content {
    max-height: 60vh;
    overflow-y: auto;
}

.v3-cascader-panel {
    display: flex;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.v3-cascader-column {
    flex: 1;
    min-width: 200px;
    border-right: 1px solid #e4e7ed;
}

.v3-cascader-column:last-child {
    border-right: none;
}

.v3-cascader-header {
    background: #f5f7fa;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e4e7ed;
    font-weight: 600;
    color: #606266;
    font-size: 14px;
    display: flex;
    gap: 1rem;
}

.v3-cascader-options {
    max-height: 300px;
    overflow-y: auto;
}

.v3-cascader-option {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.v3-cascader-option:hover {
    background-color: #f8f9fa;
}

.v3-option-label {
    flex: 1;
    text-align: left;
    font-size: 13px;
    color: #303133;
}

/* 展开按钮样式 */
.expand-btn {
    background: #f0f9ff;
    border: 1px solid #b3d8ff;
    color: #409eff;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.expand-btn:hover {
    background: #409eff;
    color: white;
}

/* 选中区域预览样式 */
.v3-selected-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.preview-header h4 {
    margin: 0;
    font-size: 14px;
    color: #303133;
}

.selected-summary {
    display: flex;
    gap: 1rem;
    font-size: 12px;
    color: #606266;
}

.selected-summary span {
    background: #e1f3d8;
    color: #67c23a;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    border: 1px solid #b3d8a0;
}

.v3-area-selector-actions {
    text-align: right;
    padding-top: 1rem;
    border-top: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .v3-strategy-edit-layout {
        flex-direction: column;
    }
    
    .v3-shipping-areas-section,
    .v3-pricing-rules-section {
        min-width: auto;
    }
    
    .v3-pricing-edit-table {
        font-size: 11px;
    }
    
    .v3-pricing-edit-table th,
    .v3-pricing-edit-table td {
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    .v3-config-layout {
        padding: 0.5rem;
    }
    
    .v3-config-layout .panel-content {
        padding: 0.5rem;
    }
    
    .strategy-item {
        padding: 0.8rem;
    }
    
    .pricing-table {
        font-size: 11px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 6px 8px;
    }
}

.strategy-selector-compact {
    width: 100%;
    max-width: 280px;
    position: relative;
}

.form-group { 
    margin-bottom: 1rem; 
}

.form-label { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-weight: 500; 
    color: #606266; 
}

/* 必填项标记样式 - 红色星号 */
.form-label[data-required="true"]::after,
.form-label.required::after {
    content: ' *';
    color: #f56c6c;
    font-weight: bold;
}

.form-input { 
    width: 100%; 
    padding: 0.5rem; 
    border: 1px solid #dcdfe6; 
    border-radius: 4px; 
    font-size: 14px; 
}

.form-input:focus { 
    outline: none; 
    border-color: #409eff; 
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); 
}

/* 表单操作按钮样式 */
.form-actions {
    text-align: right;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ebeef5;
}

.form-actions .btn {
    margin-left: 0.5rem;
}

/* 表单提示信息样式 */
.form-hint {
    display: block;
    font-size: 0.75rem;
    color: #909399;
    margin-top: 0.25rem;
    line-height: 1.2;
}

/* 地址层级输入框特殊样式 */
.form-input[placeholder*="地址层级"] {
    border-left: 3px solid #e6a23c;
}

.form-input[placeholder*="地址层级"]:focus {
    border-left-color: #f56c00;
}

/* Button Styles */
.btn { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; 
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
    text-decoration: none;
    background: transparent;
    outline: none;
    min-height: 32px;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.btn-primary { 
    background-color: #409eff; 
    border-color: #409eff;
    color: white; 
}

.btn-primary:hover:not(:disabled) {
    background-color: #66b1ff;
    border-color: #66b1ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.btn-success { 
    background-color: #67c23a;
    border-color: #67c23a; 
    color: white; 
}

.btn-success:hover:not(:disabled) {
    background-color: #85ce61;
    border-color: #85ce61;
}

.btn-danger { 
    background-color: #f56c6c;
    border-color: #f56c6c; 
    color: white; 
}

.btn-danger:hover:not(:disabled) {
    background-color: #f78989;
    border-color: #f78989;
}

.btn-secondary {
    color: var(--color-text-primary, #303133);
    background-color: var(--color-background, white);
    border-color: var(--color-border, #dcdfe6);
}

.btn-secondary:hover:not(:disabled) {
    color: var(--color-primary, #409eff);
    border-color: var(--color-primary, #409eff);
    background-color: #ecf5ff;
}

.btn-warning {
    background-color: #e6a23c;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-warning:hover {
    background-color: #cf9236;
}

.btn-warning:disabled {
    background-color: #f5d7a3;
    color: #cccccc;
    cursor: not-allowed;
}

.btn:disabled { 
    opacity: 0.6; 
    cursor: not-allowed;
    pointer-events: none;
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 12px;
    border-radius: 3px;
    min-height: 24px;
    margin: 1px;
}

/* 全选按钮样式 */
.btn-select-all {
    background-color: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
    font-size: 11px;
    padding: 2px 6px;
    margin: 2px 0 6px 0;
    width: 100%;
    transition: all 0.2s;
}

.btn-select-all:hover {
    background-color: #bae7ff;
    border-color: #69c0ff;
}

.btn-select-all.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
}

/* 级联选择器头部样式 */
.cascader-header {
    padding: 4px 8px;
}

/* 区域标签样式 */
.area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0;
}

.area-tag {
    display: inline-block;
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #91d5ff;
    white-space: nowrap;
}

.area-tag:hover {
    background-color: #bae7ff;
    border-color: #69c0ff;
}

.btn-danger:hover {
    background-color: #e85656;
}

/* 状态样式 */
.status-enabled {
    color: #67c23a;
    font-weight: bold;
}

.status-disabled {
    color: #f56c6c;
    font-weight: bold;
}

/* Table Styles */
.table { 
    width: 100%; 
    border-collapse: collapse; 
    background: white; 
    border-radius: 8px; 
    overflow: hidden; 
}

.table th, .table td { 
    padding: 0.75rem; 
    text-align: left; 
    border-bottom: 1px solid #ebeef5; 
}

.table th { 
    background-color: #f5f7fa; 
    font-weight: 600; 
    color: #606266; 
}

.compact-table {
    width: 100%;
    border-collapse: collapse;
}

.compact-table th, .compact-table td {
    padding: 8px 15px;
    text-align: left;
    border-bottom: 1px solid #ebeef5;
    font-size: 14px;
}

.compact-table th {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #606266;
}

.compact-table tbody tr:hover {
    background-color: #f5f7fa;
}

/* 运费计算结果样式 */
.result-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(228, 231, 237, 0.6);
    position: relative;
    overflow: hidden;
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #409eff 100%);
}

.result-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.result-title::before {
    content: '📊';
    margin-right: 8px;
    font-size: 1.1rem;
}

.main-result {
    background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);
    border-left: 5px solid #409eff;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.main-result::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(64, 158, 255, 0.1));
    pointer-events: none;
}

.main-result .amount {
    font-size: 2rem;
    font-weight: 800;
    color: #1a365d;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.5px;
}

/* 策略编辑表格样式 */
.form-section {
    margin-bottom: 24px;
    padding: 16px;
    background-color: #fafbfc;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.form-section h4 {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #409eff;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.pricing-rules-editor {
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pricing-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pricing-edit-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 8px;
    text-align: center;
    border-bottom: 2px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    font-size: 13px;
}

.pricing-edit-table th:last-child {
    border-right: none;
}

.pricing-edit-table td {
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    text-align: center;
    vertical-align: middle;
}

.pricing-edit-table td:last-child {
    border-right: none;
}

.pricing-rule-row {
    transition: background-color 0.2s ease;
}

.pricing-rule-row:hover {
    background-color: #f8f9fa;
}

.table-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
    background-color: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.table-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.table-input:invalid {
    border-color: #dc3545;
}

.rule-actions {
    padding: 16px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    text-align: left;
}

.rule-actions .btn {
    margin-right: 12px;
}

.rule-actions .form-hint {
    display: block;
    margin-top: 8px;
    color: #6c757d;
    font-size: 12px;
    line-height: 1.4;
}

/* 小型危险按钮样式 */
.btn-danger {
    background-color: #dc3545;
    color: white;
    border: 1px solid #dc3545;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-danger:disabled {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f1aeb5;
    cursor: not-allowed;
}

/* 成功按钮样式 */
.btn-success {
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .pricing-edit-table {
        font-size: 12px;
    }
    
    .pricing-edit-table th,
    .pricing-edit-table td {
        padding: 6px 4px;
    }
    
    .table-input {
        padding: 4px 6px;
        font-size: 12px;
    }
}

/* 运送区域选择器样式 */
.shipping-areas-selector {
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    background-color: white;
}

.areas-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
}

.selected-count {
    color: #6c757d;
    font-size: 14px;
}

.area-selector-panel {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-top: 8px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.area-selector-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    font-weight: 600;
}

.area-selector-content {
    padding: 16px;
}

.area-selector-actions {
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    text-align: right;
    background-color: #f8f9fa;
}

.area-selector-actions .btn {
    margin-left: 8px;
}

.selected-areas-display {
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

.selected-areas-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.area-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #91d5ff;
}

.area-tag.province {
    background-color: #f6ffed;
    color: #52c41a;
    border-color: #b7eb8f;
}

.area-tag.city {
    background-color: #fff2e8;
    color: #fa8c16;
    border-color: #ffd591;
}

.area-tag.district {
    background-color: #f9f0ff;
    color: #722ed1;
    border-color: #d3adf7;
}

.tag-text {
    margin-right: 4px;
}

.tag-remove-btn {
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.tag-remove-btn:hover {
    opacity: 1;
}

/* 调整模态框宽度以适应新的列数 */
@media (min-width: 1200px) {
    .pricing-edit-table {
        table-layout: fixed;
    }
    
    .pricing-edit-table th:nth-child(1), 
    .pricing-edit-table td:nth-child(1) {
        width: 120px; /* 重量上限 */
    }
    
    .pricing-edit-table th:nth-child(2), 
    .pricing-edit-table td:nth-child(2) {
        width: 100px; /* 邮资 */
    }
    
    .pricing-edit-table th:nth-child(3), 
    .pricing-edit-table td:nth-child(3) {
        width: 100px; /* 首重 */
    }
    
    .pricing-edit-table th:nth-child(4), 
    .pricing-edit-table td:nth-child(4) {
        width: 100px; /* 首费 */
    }
    
    .pricing-edit-table th:nth-child(5), 
    .pricing-edit-table td:nth-child(5) {
        width: 100px; /* 续重 */
    }
    
    .pricing-edit-table th:nth-child(6), 
    .pricing-edit-table td:nth-child(6) {
        width: 100px; /* 续费 */
    }
    
    .pricing-edit-table th:nth-child(7), 
    .pricing-edit-table td:nth-child(7) {
        width: 100px; /* 抛重比 */
    }
    
    .pricing-edit-table th:nth-child(8), 
    .pricing-edit-table td:nth-child(8) {
        width: 80px; /* 操作 */
    }
}

.calculation-details {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 10px;
    padding: 1.2rem;
    border: 1px solid #e2e8f0;
    position: relative;
}

.calculation-details::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 3px;
    height: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

.calculation-details h4 {
    margin: 0 0 1.2rem 20px;
    color: #2d3748;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.2s ease;
    border-radius: 4px;
    margin-bottom: 2px;
}

.detail-item:hover {
    background-color: rgba(64, 158, 255, 0.05);
    padding-left: 8px;
    padding-right: 8px;
}

.detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.detail-item .label {
    font-weight: 600;
    color: #4a5568;
    min-width: 120px;
    font-size: 14px;
}

.detail-item .value {
    font-weight: 700;
    color: #1a202c;
    font-size: 14px;
}

.detail-item .highlight {
    color: #409eff;
    font-size: 1.1rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
}

.calculation-formula {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 2px solid #e2e8f0;
    position: relative;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(237, 242, 247, 0.3) 100%);
    border-radius: 8px;
    padding: 1.4rem 1rem 1rem;
    margin-top: 1.2rem;
}

.calculation-formula::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #409eff 100%);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.calculation-formula::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(64, 158, 255, 0.3) 50%, transparent 100%);
}

.formula-title {
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    position: relative;
    padding: 8px 12px 8px 40px;
    background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(103, 194, 58, 0.05) 100%);
    border-radius: 6px;
    border-left: 4px solid #409eff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.formula-title::before {
    content: '📝';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    background: linear-gradient(135deg, #409eff, #667eea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(64, 158, 255, 0.3));
}

.formula-title::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #409eff, transparent);
    border-radius: 1px;
}

.formula-content {
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 0.8rem;
    font-family: 'Courier New', monospace;
    color: #606266;
    line-height: 1.5;
}

.compact-table tbody tr.selected-area {
    background-color: #ecf5ff;
    border-left: 3px solid #409eff;
}

/* Result Card Styles */
.result-card { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border-radius: 8px; 
    padding: 1.5rem; 
    margin-top: 1rem; 
}

.result-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
    margin-bottom: 1rem; 
}

.result-item { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 0.5rem; 
}

/* Status and Message Styles */
.loading { 
    text-align: center; 
    padding: 2rem; 
    color: #909399; 
}

.error { 
    color: #f56c6c; 
    background-color: #fef0f0; 
    border: 1px solid #fbc4c4; 
    border-radius: 4px; 
    padding: 0.75rem; 
    margin: 1rem 0; 
}

.success { 
    color: #67c23a; 
    background-color: #f0f9ff; 
    border: 1px solid #b3d8ff; 
    border-radius: 4px; 
    padding: 0.75rem; 
    margin: 1rem 0; 
}

.status-badge { 
    padding: 0.25rem 0.5rem; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: 500; 
}

.status-active { 
    background-color: #f0f9ff; 
    color: #409eff; 
}

/* V3策略配置性能优化样式 */
.status-pending {
    background-color: #ffc107;
    color: #333;
}

.pending-new-config {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107;
}

.pending-new-config .area-tag {
    background-color: #e2e3e5;
    color: #495057;
    border: 1px solid #ced4da;
}

.marked-for-deletion {
    background-color: #ffebee !important;
    opacity: 0.6;
}

.area-names {
    transition: background-color 0.3s ease;
}

/* 地区信息回显增强样式 */
.area-tag[data-area-id] {
    position: relative;
}

.area-tag[data-area-id]:hover::after {
    content: "ID: " attr(data-area-id);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 1000;
}

.status-inactive { 
    background-color: #fef0f0; 
    color: #f56c6c; 
}

/* Modal Styles */
.modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
}

.modal-content { 
    background: white; 
    border-radius: 8px; 
    padding: 1.5rem; 
    max-width: 500px; 
    width: 90%; 
    max-height: 80vh; 
    overflow-y: auto; 
}

.modal-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 1rem; 
}

.modal-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
}

.close-btn { 
    background: none; 
    border: none; 
    font-size: 1.5rem; 
    cursor: pointer; 
}

/* Action Bar Styles */
.actions { 
    margin-bottom: 1rem; 
}

.search-bar { 
    display: flex; 
    gap: 1rem; 
    align-items: end; 
    margin-bottom: 1rem; 
}

.search-bar .form-group { 
    margin-bottom: 0; 
}

/* Mapping Status Styles */
.mapping-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
}

.mapping-status.active {
    background-color: #e7f5e7;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

.mapping-status.inactive {
    background-color: #f5f5f5;
    color: #999;
    border: 1px solid #d9d9d9;
}

/* Mapping Page Layout - Three Column */
.mapping-layout-three-column {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    height: calc(100vh - 350px);
    min-height: 600px;
}

/* 左侧策略面板 */
.mapping-left-panel {
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* 中间地区面板 */
.mapping-center-panel {
    width: 350px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* 右侧计费规则面板 */
.mapping-right-panel {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* 面板通用样式 */
.panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* 策略操作按钮 */
.strategy-actions {
    display: flex;
    gap: 8px;
    padding: 15px 20px;
    border-bottom: 1px solid #f5f7fa;
    background-color: #fafbfc;
}

.strategy-actions .btn {
    flex: 1;
    margin: 0;
    font-size: 12px;
    padding: 6px 12px;
}

/* 策略列表项 */
.strategy-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f7fa;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.strategy-item:hover {
    background-color: #f5f7fa;
}

.strategy-item.selected-strategy {
    background-color: #ecf5ff;
    border-left-color: #409eff;
}

.strategy-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.strategy-name {
    font-weight: 500;
    color: #303133;
    font-size: 14px;
}

.strategy-time, .strategy-note {
    font-size: 12px;
    color: #909399;
    line-height: 1.2;
}

/* 地区展示 */
.area-groups {
    padding: 15px 20px;
}

.area-group-item {
    padding: 12px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #409eff;
}

.area-info .area-name {
    font-weight: 500;
    color: #303133;
    font-size: 14px;
}

/* 计费规则表格 */
.pricing-rules-table {
    padding: 15px 20px;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #ebeef5;
}

.pricing-table th,
.pricing-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid #ebeef5;
    vertical-align: middle;
}

.pricing-table th {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #606266;
    font-size: 12px;
}

.pricing-table tbody tr:hover {
    background-color: #f5f7fa;
}

/* 空状态样式 */
.empty-strategy,
.empty-area,
.empty-rules {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #909399;
    font-size: 14px;
    background-color: #fafbfc;
    margin: 20px;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
}

/* 响应式设计 */
@media (max-width: 1400px) {
    .mapping-layout-three-column {
        flex-direction: column;
        height: auto;
    }
    
    .mapping-left-panel,
    .mapping-center-panel,
    .mapping-right-panel {
        width: 100%;
        height: auto;
        min-height: 300px;
    }
    
    .strategy-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .mapping-layout-three-column {
        gap: 15px;
        margin-top: 15px;
    }
    
    .panel-header {
        padding: 12px 15px;
    }
    
    .strategy-actions {
        padding: 12px 15px;
    }
    
    .strategy-actions .btn {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    .pricing-table {
        font-size: 11px;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: 6px 8px;
    }
}

/* 原有的二栏布局保持兼容 */
.mapping-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.mapping-sidebar {
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.mapping-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.sidebar-header, .content-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h4, .content-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.content-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.content-actions .btn {
    margin-right: 0;
}

.sidebar-content, .content-body {
    padding: 0;
}

.area-name {
    font-weight: 500;
    color: #303133;
}

.area-type {
    color: #909399;
    font-size: 12px;
}

/* Pricing Table Styles */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pricing-table th, .pricing-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #ebeef5;
    vertical-align: middle;
}

.pricing-table th {
    background-color: #f5f7fa;
    font-weight: 600;
    color: #606266;
}

.weight-header, .weight-subheader, .weight-range, .weight-first, .weight-price {
    min-width: 80px;
    font-size: 12px;
    text-align: center;
}

.weight-header {
    background-color: #f0f2f5;
    font-weight: 600;
}

.weight-subheader {
    background-color: #f8f9fa;
    color: #606266;
    font-weight: 500;
}

.weight-range {
    background-color: #f8f9fa;
    color: #409eff;
    font-weight: 500;
}

.weight-first, .weight-price {
    background-color: #fafafa;
    font-size: 11px;
}

.action-header {
    min-width: 80px;
    background-color: #f5f7fa;
}

/* Strategy Selector Styles */
.strategy-selector {
    position: relative;
}

.strategy-search-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    padding-right: 30px; /* 为清空按钮留出空间 */
}

/* 搜索清空按钮 */
.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #c0c4cc;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.search-clear-btn:hover {
    background-color: #f5f7fa;
    color: #909399;
}

.search-clear-btn:active {
    background-color: #e6e8eb;
}

.strategy-search-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.strategy-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dcdfe6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.strategy-option {
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #f5f7fa;
    transition: background-color 0.2s;
    position: relative;
}

.strategy-option:hover {
    background-color: #f5f7fa;
}

.strategy-option:last-child {
    border-bottom: none;
}

.strategy-option.selected {
    background-color: #ecf5ff;
    color: #409eff;
}

/* 策略选项内容分层 */
.strategy-option-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 2px;
}

.strategy-option-desc {
    display: block;
    font-size: 12px;
    color: #909399;
    line-height: 1.3;
}

.strategy-option:hover .strategy-option-name {
    color: #409eff;
}

.strategy-option:hover .strategy-option-desc {
    color: #606266;
}

.no-strategy-results {
    padding: 0.5rem;
    color: #909399;
    text-align: center;
    font-size: 12px;
}

.searching-strategies {
    padding: 0.5rem;
    color: #409eff;
    text-align: center;
    font-size: 12px;
}

/* 策略列表样式 */
.strategy-list {
    max-height: 400px;
    overflow-y: auto;
}

.strategy-item {
    padding: 12px 16px;
    border-bottom: 1px solid #e6e6e6;
    cursor: pointer;
    transition: background-color 0.2s;
}

.strategy-item:hover {
    background-color: #f5f5f5;
}

.strategy-item.selected-strategy {
    background-color: #ecf5ff;
}

.strategy-item:last-child {
    border-bottom: none;
}

/* 策略项带按钮布局 */
.strategy-item-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: default; /* 取消整个项的点击样式 */
}

.strategy-item-with-button .strategy-name {
    flex: 1;
    cursor: pointer; /* 只有策略名称可点击 */
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.strategy-item-with-button .strategy-name:hover {
    background-color: rgba(64, 158, 255, 0.1);
}

.strategy-item-with-button.selected-strategy .strategy-name {
    background-color: rgba(255, 255, 255, 0.2);
}

.strategy-add-rule-btn {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    min-width: auto;
    white-space: nowrap;
    background-color: #409eff;
    border-color: #409eff;
    color: white;
    transition: all 0.2s;
}

.strategy-add-rule-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.strategy-add-rule-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(64, 158, 255, 0.3);
}

.strategy-item-with-button.selected-strategy .strategy-add-rule-btn {
    background-color: white;
    color: #409eff;
    border-color: white;
}

.strategy-item-with-button.selected-strategy .strategy-add-rule-btn:hover {
    background-color: #f0f9ff;
    border-color: #f0f9ff;
    color: #337ecc;
}

.strategy-name {
    display: block;
    font-size: 14px;
    line-height: 1.4;
}

/* Additional Table Cells */
.weight-cell, .action-cell {
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
}

.area-cell {
    text-align: left;
    min-width: 120px;
    background-color: #fafafa;
}

.area-info {
    line-height: 1.4;
}

.area-meta {
    font-size: 11px;
    color: #909399;
    margin-top: 2px;
}

.price-cell {
    min-width: 60px;
}

.price-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.weight-limit {
    font-size: 11px;
    color: #606266;
    font-weight: 500;
}

.price-value {
    font-weight: 600;
    color: #303133;
    font-size: 14px;
}

.price-unit {
    font-size: 11px;
    color: #909399;
}

.no-mapping {
    color: #c0c4cc;
    font-style: italic;
}

.highlighted-row {
    background-color: #ecf5ff;
}

.highlighted-row .area-cell {
    background-color: #d9ecff;
}

/* Modern accessibility improvements */
@media (prefers-contrast: high) {
    .btn-primary {
        background-color: #0056b3;
        border-color: #0056b3;
    }
    .table th {
        background-color: #e9ecef;
        border-color: #000;
    }
    .form-input {
        border-color: #000;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* 三级联动多选框样式 */
.cascader-selector {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}

.cascader-panel {
    display: flex;
    min-height: 200px;
    max-height: 300px;
}

.cascader-column {
    flex: 1;
    border-right: 1px solid #ebeef5;
    overflow-y: auto;
}

.cascader-column:last-child {
    border-right: none;
}

.cascader-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f5f7fa;
    font-size: 14px;
}

.cascader-option:hover {
    background-color: #f5f7fa;
}

.cascader-option.has-children {
    position: relative;
}

.cascader-option.has-children::after {
    content: '›';
    position: absolute;
    right: 8px;
    color: #c0c4cc;
    font-size: 14px;
    font-weight: bold;
}

.cascader-checkbox {
    margin-right: 8px;
    cursor: pointer;
}

.cascader-option-label {
    flex: 1;
    user-select: none;
}

.cascader-option.indeterminate .cascader-checkbox {
    background-color: #409eff;
    border-color: #409eff;
    position: relative;
}

.cascader-option.indeterminate .cascader-checkbox::after {
    content: '-';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.cascader-selected-tags {
    min-height: 32px;
    padding: 4px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cascader-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background-color: #f0f2f5;
    border-radius: 3px;
    font-size: 12px;
    color: #606266;
    max-width: 200px;
}

.cascader-tag-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cascader-tag-close {
    margin-left: 4px;
    cursor: pointer;
    color: #909399;
    font-size: 10px;
    font-weight: bold;
}

.cascader-tag-close:hover {
    color: #f56c6c;
}

.cascader-empty {
    text-align: center;
    color: #909399;
    padding: 20px;
    font-size: 14px;
}

/* 运费计算页面区域选择器样式 */
.area-selector-container {
    position: relative;
}

.area-selector-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
}

.area-selector-input:hover {
    border-color: #c0c4cc;
}

.area-selector-input.focused {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.area-selector-input .placeholder {
    color: #c0c4cc;
}

.area-selector-arrow {
    transition: transform 0.3s;
    color: #c0c4cc;
    font-size: 12px;
}

.area-selector-arrow.expanded {
    transform: rotate(180deg);
}

.area-selector-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 2px;
    display: flex;
    max-height: 300px;
}

.area-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ebeef5;
    max-width: 200px;
}

.area-column:last-child {
    border-right: none;
}

.area-column-header {
    padding: 8px 12px;
    background-color: #f5f7fa;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
}

.area-options {
    flex: 1;
    overflow-y: auto;
}

.area-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #f5f7fa;
    transition: all 0.2s;
    position: relative;
}

.area-option:hover {
    background-color: #f5f7fa;
    color: #409eff;
}

.area-option.selected {
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 500;
}

.area-option.has-children::after {
    content: '›';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c4cc;
    font-size: 16px;
    font-weight: bold;
}

.area-clear-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #c0c4cc;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.area-clear-btn:hover {
    color: #f56c6c;
    background-color: #fef0f0;
}

/* 详细计算公式样式 */
.detailed-formula {
    background: linear-gradient(135deg, #f8f9fb 0%, #f1f4f8 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.detailed-formula::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #409eff, #667eea);
}

.detailed-formula pre {
    margin: 0;
    
    /* 使用CSS变量定义的字体 */
    font-family: var(--font-family-mixed);
    font-size: var(--font-size-formula);
    font-weight: 400;
    line-height: var(--line-height-formula);
    color: var(--color-formula-text);
    
    /* 文本处理 */
    white-space: pre-wrap;
    word-wrap: break-word;
    padding-left: 8px;
    text-shadow: var(--text-shadow-light);
    
    /* 字体渲染优化 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    
    /* 高级字体特性 */
    font-variant-ligatures: contextual;
    font-variant-numeric: tabular-nums slashed-zero lining-nums;
    font-feature-settings: 
        "liga" 1,     /* 连字 */
        "tnum" 1,     /* 表格数字 */
        "zero" 1,     /* 斜线零 */
        "lnum" 1,     /* 老式数字 */
        "ss01" 1,     /* 样式集1 */
        "cv01" 1,     /* 字符变体1 */
        "calt" 1,     /* 上下文替代 */
        "kern" 1;     /* 字母间距 */
    
    /* 字符间距优化 */
    letter-spacing: var(--letter-spacing-formula);
    word-spacing: var(--word-spacing-formula);
    
    /* 文本选择优化 */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    
    /* 排版优化 */
    tab-size: 4;
    text-align: left;
    text-justify: none;
    hanging-punctuation: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 计算公式字体的精细优化 */
.detailed-formula pre {
    /* 保持原有的渲染优化设置 */
    position: relative;
    counter-reset: step-counter;
    
    /* 字体大小响应式优化 */
    font-size: clamp(13px, 2.5vw, 15px);
    
    /* 中文和英文混合显示优化 */
    font-family: 
        /* 中文字体 */
        'PingFang SC', 
        'Microsoft YaHei', 
        'Source Han Sans SC',
        /* 英文等宽字体 */
        'JetBrains Mono', 
        'Fira Code', 
        'Source Code Pro',
        'SF Mono',
        'Consolas',
        monospace;
    
    /* 数字和符号的特殊处理 */
    font-variant-numeric: tabular-nums lining-nums;
    
    /* 文本阴影优化 */
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* 颜色对比度优化 */
    color: #1a202c;
    
    /* 行高和间距的精细调整 */
    line-height: 1.8;
    letter-spacing: 0.02em;
    word-spacing: 0.05em;
}

/* 为不同类型的内容添加特殊样式 */
.detailed-formula pre {
    /* 使用CSS伪类选择器优化特定内容 */
    background-image: 
        /* 步骤标题区域的特殊处理 */
        linear-gradient(90deg, rgba(64, 158, 255, 0.08) 0%, transparent 50%),
        linear-gradient(90deg, rgba(103, 194, 58, 0.08) 0%, transparent 50%),
        linear-gradient(90deg, rgba(245, 108, 108, 0.08) 0%, transparent 50%),
        linear-gradient(90deg, rgba(230, 162, 60, 0.08) 0%, transparent 50%);
    
    background-size: 
        100% 4em,     /* 第一步 */
        100% 4em,     /* 第二步 */
        100% 4em,     /* 第三步 */
        100% 3em;     /* 结束部分 */
    
    background-position: 
        0 0,          /* 第一步 */
        0 10em,       /* 第二步 */
        0 20em,       /* 第三步 */
        0 30em;       /* 结束部分 */
    
    background-repeat: no-repeat;
}

/* 为数字和金额添加特殊强调 */
.detailed-formula pre {
    /* 使用伪元素来为特定内容添加样式 */
    position: relative;
}

/* 为金额数字添加特殊样式（使用CSS无法直接选择文本内容，但可以优化整体显示） */
.detailed-formula pre {
    /* 为数字密集区域增强可读性 */
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 增强特殊符号的显示效果 */
.detailed-formula pre {
    /* 优化算数符号的显示 */
    font-feature-settings: 
        "liga" 1,     /* 连字支持 */
        "tnum" 1,     /* 表格数字 */
        "zero" 1,     /* 斜线零 */
        "ss01" 1,     /* 样式集 */
        "calt" 1,     /* 上下文替代 */
        "kern" 1;     /* 字母间距 */
    
    /* 高级排版特性 */
    text-align: left;
    text-justify: none;
    hanging-punctuation: none;
}

/* 移动端字体优化 */
@media (max-width: 768px) {
    .detailed-formula pre {
        font-size: var(--font-size-formula-mobile);
        line-height: var(--line-height-formula-mobile);
        letter-spacing: calc(var(--letter-spacing-formula) * 0.5);
        word-spacing: calc(var(--word-spacing-formula) * 0.6);
        padding-left: 6px;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .detailed-formula pre {
        -webkit-font-smoothing: subpixel-antialiased;
        text-shadow: var(--text-shadow-retina);
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-formula-text: var(--color-formula-text-dark);
    }
    
    .detailed-formula pre {
        color: var(--color-formula-text-dark);
        text-shadow: var(--text-shadow-dark);
    }
}

/* 高对比度模式优化 */
@media (prefers-contrast: high) {
    .detailed-formula pre {
        font-weight: 500;
        text-shadow: none;
        color: #000;
    }
}

/* 减少动画偏好者的优化 */
@media (prefers-reduced-motion: reduce) {
    .detailed-formula pre {
        font-feature-settings: 
            "liga" 0,     /* 禁用连字 */
            "tnum" 1,     /* 保持表格数字 */
            "zero" 1;     /* 保持斜线零 */
    }
}

/* 打印样式优化 */
@media print {
    .detailed-formula pre {
        font-family: 'Consolas', 'Courier New', monospace;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #000 !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* 为步骤标题添加特殊样式 - 通过内容选择器 */
.detailed-formula pre {
    /* 使用伪元素来为步骤添加装饰 */
    background-image: 
        /* 第一步背景 */
        linear-gradient(90deg, rgba(64, 158, 255, 0.06) 0%, transparent 40%),
        /* 第二步背景 */
        linear-gradient(90deg, rgba(103, 194, 58, 0.06) 0%, transparent 40%),
        /* 第三步背景 */
        linear-gradient(90deg, rgba(245, 108, 108, 0.06) 0%, transparent 40%),
        /* 结束步骤背景 */
        linear-gradient(90deg, rgba(230, 162, 60, 0.06) 0%, transparent 40%);
    background-size: 100% 3em;
    background-repeat: no-repeat;
    background-position: 
        0 0,      /* 第一步 */
        0 12em,   /* 第二步 */
        0 24em,   /* 第三步 */
        0 36em;   /* 结束步骤 */
}

/* 为数字和公式添加特殊样式 */
.detailed-formula pre {
    /* 增强数字的显示效果 */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* 为计算结果添加特殊高亮 */
.detailed-formula pre {
    /* 使用CSS变量来管理颜色 */
    --highlight-bg: rgba(64, 158, 255, 0.12);
    --step-border: rgba(64, 158, 255, 0.2);
    --result-color: #1a365d;
    --formula-text: #2d3748;
}

/* 添加细微的动画效果 */
.detailed-formula {
    transition: all 0.3s ease;
}

.detailed-formula:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.detailed-formula pre {
    transition: all 0.2s ease;
}

/* 增强文本的层次效果 */
.detailed-formula pre {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 为重要信息添加视觉焦点 */
.detailed-formula pre {
    /* 为包含“最终运费”的行添加特殊样式 */
    background-image: 
        /* 保持原有的步骤背景 */
        linear-gradient(90deg, rgba(64, 158, 255, 0.06) 0%, transparent 40%),
        linear-gradient(90deg, rgba(103, 194, 58, 0.06) 0%, transparent 40%),
        linear-gradient(90deg, rgba(245, 108, 108, 0.06) 0%, transparent 40%),
        linear-gradient(90deg, rgba(230, 162, 60, 0.06) 0%, transparent 40%),
        /* 最终结果的特殊背景 */
        linear-gradient(90deg, rgba(22, 163, 74, 0.08) 0%, rgba(34, 197, 94, 0.05) 60%, transparent 100%);
    background-size: 
        100% 3em,   /* 步骤背景 */
        100% 3em,
        100% 3em,
        100% 3em,
        100% 1.5em; /* 结果背景 */
    background-position: 
        0 0,        /* 第一步 */
        0 12em,     /* 第二步 */
        0 24em,     /* 第三步 */
        0 36em,     /* 结束步骤 */
        0 100%;     /* 最后一行的结果 */
    background-repeat: no-repeat;
}

/* 增强数字的可读性 */
.detailed-formula pre {
    /* 为金额数字添加特殊样式 */
    font-feature-settings: "tnum" 1;
    tab-size: 4;
}

/* 为不同类型的内容增加左侧标记 */
.detailed-formula {
    position: relative;
}

.detailed-formula::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--step1-color) 0%,
        var(--step1-color) 25%,
        var(--step2-color) 25%,
        var(--step2-color) 50%,
        var(--step3-color) 50%,
        var(--step3-color) 75%,
        var(--step4-color) 75%,
        var(--step4-color) 100%
    );
    border-radius: 1px;
    opacity: 0.7;
}

.formula-content {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 4px solid #409eff;
    margin-top: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.formula-content::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(64, 158, 255, 0.3), transparent);
}

/* 为计算公式添加动画效果 */
.detailed-formula {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 计算公式的最终优化样式 */
.detailed-formula {
    /* 增强整体容器的视觉效果 */
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: 
        linear-gradient(135deg, #f8f9fb 0%, #f1f4f8 100%),
        radial-gradient(circle at 100% 0%, rgba(64, 158, 255, 0.05) 0%, transparent 50%);
    backdrop-filter: blur(1px);
}

/* 为公式内容添加精细的排版优化 */
.detailed-formula pre {
    /* 优化数字和符号的显示 */
    font-variant-numeric: proportional-nums;
    word-spacing: 0.1em;
    
    /* 为不同类型的内容添加微妙的样式区分 */
    background-image: 
        /* 步骤分隔线 */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2.8em,
            rgba(64, 158, 255, 0.1) 2.8em,
            rgba(64, 158, 255, 0.1) 3em
        ),
        /* 步骤背景高亮 */
        linear-gradient(90deg, rgba(64, 158, 255, 0.04) 0%, transparent 50%),
        linear-gradient(90deg, rgba(103, 194, 58, 0.04) 0%, transparent 50%),
        linear-gradient(90deg, rgba(245, 108, 108, 0.04) 0%, transparent 50%),
        linear-gradient(90deg, rgba(230, 162, 60, 0.04) 0%, transparent 50%);
    
    background-size: 
        100% 100%,    /* 分隔线 */
        100% 8em,     /* 第一步 */
        100% 8em,     /* 第二步 */
        100% 8em,     /* 第三步 */
        100% 4em;     /* 结束部分 */
    
    background-position: 
        0 0,          /* 分隔线 */
        0 0,          /* 第一步 */
        0 8em,        /* 第二步 */
        0 16em,       /* 第三步 */
        0 24em;       /* 结束部分 */
    
    background-repeat: no-repeat;
}

/* 增强特定关键信息的显示效果 */
.detailed-formula pre {
    /* 为金额数字增强显示 */
    position: relative;
}

/* 添加微妙的视觉反馈 */
.detailed-formula {
    cursor: default;
    user-select: text;
}

.detailed-formula:hover pre {
    color: #1a202c;
}

/* 为计算公式添加可访问性优化 */
.detailed-formula {
    /* 保证在高对比度模式下的可读性 */
    @media (prefers-contrast: high) {
        border-color: #000;
        background: #fff;
    }
    
    /* 减少动画效果的支持 */
    @media (prefers-reduced-motion: reduce) {
        animation: none;
        transition: none;
    }
}

/* 为打印样式优化 */
@media print {
    .detailed-formula {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
    
    .detailed-formula pre {
        background: none !important;
        color: #000 !important;
        font-size: 12px !important;
    }
}

/* 响应式优化 */
@media (max-width: 768px) {
    .detailed-formula {
        padding: 12px;
        margin-top: 8px;
    }
    
    .detailed-formula pre {
        font-size: 13px;
        line-height: 1.6;
        padding-left: 6px;
    }
    
    .formula-content {
        padding: 10px 14px;
    }
}

/* 区域选择器空状态样式 */
.area-selector-empty {
    text-align: center;
    color: #909399;
    padding: 20px;
    font-size: 14px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin: 8px;
}

/* 新的区域选择器样式 - 支持展开/选择分离 */
.area-option-container {
    border-bottom: 1px solid #f5f7fa;
    transition: all 0.2s;
}

.area-option-container:hover {
    background-color: #f5f7fa;
}

.area-option-container.selected {
    background-color: #ecf5ff;
}

.area-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

.area-name {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    transition: color 0.2s;
}

.area-name:hover {
    color: #409eff;
}

.area-select-btn {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    color: #606266;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 40px;
    text-align: center;
}

.area-select-btn:hover {
    background: #409eff;
    color: white;
    border-color: #409eff;
}

.area-select-btn.selected {
    background: #409eff;
    color: white;
    border-color: #409eff;
    font-weight: bold;
}

/* 分页控件样式 */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.pagination-info {
    font-size: 14px;
    color: #6c757d;
}

.pagination-controls {
    display: flex;
    gap: 5px;
}

.pagination-controls .btn-small {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 2px;
}

.pagination-controls .btn-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-controls .btn-small.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.pagination-controls .btn-small.btn-primary {
    background: #409eff;
    color: white;
    border-color: #409eff;
}

.pagination-controls .btn-small.btn-primary:hover:not(:disabled) {
    background: #66b1ff;
    border-color: #66b1ff;
    transform: translateY(-1px);
}

.pagination-controls .btn-small:not(.active):not(.btn-primary):hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    color: #6c757d;
    min-width: 36px;
    justify-content: center;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.page-size-selector select {
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background-color: white;
    font-size: 12px;
}

/* 现代化级联选择器样式 */
.modern-cascader-container {
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 工具栏样式 */
.cascader-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
    border-bottom: 1px solid #e4e7ed;
}

.toolbar-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-outline {
    background: white;
    border: 1px solid #d0d7de;
    color: #656d76;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-outline:hover {
    background: #f6f8fa;
    border-color: #1f2328;
    color: #1f2328;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.btn-danger-outline {
    background: white;
    border: 1px solid #f85149;
    color: #d1242f;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-danger-outline:hover {
    background: #fff1f0;
    border-color: #d1242f;
    color: #d1242f;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(248, 81, 73, 0.2);
}

.selection-stats {
    font-size: 14px;
    color: #656d76;
    font-weight: 500;
}

.stat-number {
    color: #1f883d;
    font-weight: 700;
    font-size: 16px;
}

/* 现代级联面板 */
.modern-cascader-panel {
    min-height: 400px;
    max-height: 600px;
    overflow: visible;
}

/* 面板样式 */
.cascader-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.provinces-pane {
    background: #fafbfc;
}

.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
}

.pane-header h4, .pane-header h5, .pane-header h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pane-count, .sub-panel-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.pane-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    max-height: 450px;
    scrollbar-width: thin;
    scrollbar-color: #d0d7de #f1f3f5;
}

/* 区域项目样式 */
.area-item {
    margin-bottom: 4px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    border: 1px solid #e1e4e8;
}

.area-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #0969da;
    transform: translateY(-1px);
}

.area-item.expanded {
    background: #f6f8fa;
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1);
}

.area-item.selected {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #0969da;
}

.area-item.indeterminate {
    background: linear-gradient(135deg, #fef3c7 0%, #fef7cd 100%);
    border-color: #f59e0b;
}

/* 项目主体 */
.item-main {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.item-main:hover {
    background: rgba(9, 105, 218, 0.05);
}

/* 复选框样式 */
.item-checkbox {
    position: relative;
    margin-right: 12px;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.item-checkbox:hover {
    background-color: rgba(9, 105, 218, 0.1);
}

.item-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
}

.checkmark {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #d0d7de;
    border-radius: 4px;
    background: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.item-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #0969da;
    border-color: #0969da;
}

.item-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.item-checkbox input[type="checkbox"]:indeterminate + .checkmark {
    background: #f59e0b;
    border-color: #f59e0b;
}

.item-checkbox input[type="checkbox"]:indeterminate + .checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 2px;
    background: white;
    transform: translate(-50%, -50%);
}

/* 标签样式 */
.item-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.item-label:hover {
    background-color: rgba(9, 105, 218, 0.05);
}

.item-name {
    font-weight: 500;
    color: #1f2328;
    font-size: 14px;
}

.item-count {
    font-size: 12px;
    color: #656d76;
    font-weight: 400;
}

/* 展开图标 */
.item-expand {
    margin-left: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.item-expand:hover {
    background-color: rgba(9, 105, 218, 0.1);
}

.expand-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #656d76;
    font-size: 10px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f6f8fa;
    border-radius: 50%;
    border: 1px solid #d0d7de;
}

.expand-icon.expanded {
    transform: rotate(90deg);
    background: #0969da;
    color: white;
    border-color: #0969da;
}

/* 子面板样式 */
.sub-panel {
    margin-top: 8px;
    margin-left: 30px;
    border-left: 3px solid #e1e4e8;
    border-radius: 0 6px 6px 0;
    background: white;
    box-shadow: inset 0 0 0 1px #f1f3f5;
}

.cities-panel {
    border-left-color: #0969da;
}

.districts-panel {
    border-left-color: #1f883d;
    margin-left: 60px;
}

.sub-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f6f8fa 0%, #f1f3f5 100%);
    border-bottom: 1px solid #e1e4e8;
}

.sub-panel-content {
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 区县网格布局 */
.districts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.district-item {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    padding: 8px;
    transition: all 0.2s;
}

.district-item:hover {
    background: #e7f3ff;
    border-color: #0969da;
    transform: scale(1.02);
}

.district-item.selected {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border-color: #0969da;
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.2);
}

.district-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
    padding: 2px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.district-label:hover {
    background-color: rgba(9, 105, 218, 0.1);
}

.district-label input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 14px;
    height: 14px;
}

.checkmark-small {
    display: block;
    width: 14px;
    height: 14px;
    border: 1.5px solid #d0d7de;
    border-radius: 3px;
    background: white;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.checkmark-small:hover {
    border-color: #0969da;
    background-color: rgba(9, 105, 218, 0.05);
    transform: scale(1.1);
}

.district-label input[type="checkbox"]:checked + .checkmark-small {
    background: #0969da;
    border-color: #0969da;
}

.district-label input[type="checkbox"]:checked + .checkmark-small::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.district-name {
    font-size: 12px;
    color: #1f2328;
    font-weight: 500;
    line-height: 1.2;
}

/* 已选择预览 */
.selected-preview {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-top: 1px solid #e1e4e8;
    padding: 16px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    display: flex;
    align-items: center;
    gap: 6px;
}

.selected-count {
    background: #0969da;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    max-width: 200px;
}

.selected-tag:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.selected-tag.province {
    border-left: 3px solid #8b5cf6;
}

.selected-tag.city {
    border-left: 3px solid #0969da;
}

.selected-tag.district {
    border-left: 3px solid #1f883d;
}

.tag-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.tag-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2328;
}

.tag-remove-btn {
    background: none;
    border: none;
    color: #656d76;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.tag-remove-btn:hover {
    background: #f85149;
    color: white;
    transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modern-cascader-container {
        border-radius: 6px;
    }
    
    .cascader-toolbar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .toolbar-buttons {
        justify-content: center;
    }
    
    .modern-cascader-panel {
        max-height: 500px;
        overflow: visible;
    }
    
    .sub-panel {
        margin-left: 15px;
    }
    
    .districts-panel {
        margin-left: 30px;
    }
    
    .districts-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 4px;
    }
    
    .selected-tags {
        gap: 6px;
    }
    
    .selected-tag {
        font-size: 11px;
        padding: 4px 8px;
        max-width: 150px;
    }
}

/* 滚动条美化 */
.pane-content::-webkit-scrollbar {
    width: 8px;
}

.pane-content::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
    margin: 4px 0;
}

.pane-content::-webkit-scrollbar-thumb {
    background: #d0d7de;
    border-radius: 4px;
    transition: background 0.2s;
    min-height: 30px;
}

.pane-content::-webkit-scrollbar-thumb:hover {
    background: #8c959f;
}

.pane-content::-webkit-scrollbar-corner {
    background: #f1f3f5;
}

/* 为子面板的滚动内容添加滚动条样式 */
.sub-panel-content::-webkit-scrollbar {
    width: 6px;
}

.sub-panel-content::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.sub-panel-content::-webkit-scrollbar-thumb {
    background: #d0d7de;
    border-radius: 3px;
    transition: background 0.2s;
}

.sub-panel-content::-webkit-scrollbar-thumb:hover {
    background: #8c959f;
}

/* 加载和空状态 */
.cascader-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #656d76;
    font-size: 14px;
}

.cascader-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #8c959f;
    font-size: 14px;
}

.cascader-empty::before {
    content: '📍';
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* 联动功能控制按钮样式 */
.linkage-control {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.linkage-control:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.linkage-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    user-select: none;
    gap: 8px;
}

.linkage-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid #ced4da;
    appearance: none;
    background-color: #fff;
    transition: all 0.2s ease;
    position: relative;
}

.linkage-toggle input[type="checkbox"]:checked {
    background-color: #409eff;
    border-color: #409eff;
}

.linkage-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.linkage-toggle input[type="checkbox"]:hover {
    border-color: #409eff;
    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.linkage-label {
    font-weight: 500;
    color: #343a40;
    flex: 1;
}

.linkage-icon {
    font-size: 16px;
    margin-right: 6px;
}

.linkage-hint {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
    margin-left: auto;
}

/* 联动启用时的特殊样式 */
.linkage-control.enabled {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #42a5f5;
}

.linkage-control.enabled .linkage-label {
    color: #1976d2;
}

.linkage-control.enabled .linkage-icon {
    color: #1976d2;
}

/* 合并规则显示样式 */
.merged-rule-info {
    line-height: 1.4;
}

.merged-rule-description {
    font-size: 13px;
    color: #606266;
    word-break: break-word;
    margin-bottom: 4px;
}

.merged-rule-hint {
    color: #909399;
    font-size: 11px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
}

.merged-rule-label {
    color: #409eff;
    font-size: 12px;
    font-weight: 500;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
}

/* 显示模式切换按钮 */
.display-mode-switch {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}

.display-mode-switch .btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.display-mode-switch .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.display-mode-switch .btn-default {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

.display-mode-switch .btn-default:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* 按区域分组表格样式 */
.area-grouped-table {
    border-collapse: collapse;
    width: 100%;
}

.area-grouped-table th,
.area-grouped-table td {
    border: 1px solid #dee2e6;
    padding: 12px;
    text-align: left;
    vertical-align: middle;
}

.area-grouped-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

/* 策略列样式 */
.area-grouped-table .strategy-cell {
    background-color: #f8f9fa;
    font-weight: 500;
    color: #495057;
    border-right: 2px solid #007bff;
}

/* 区域列样式 */
.area-grouped-table .area-cell {
    background-color: #e3f2fd;
    font-weight: 500;
    color: #1565c0;
    border-right: 2px solid #2196f3;
}

/* 重量列样式 */
.area-grouped-table .weight-cell {
    font-family: 'Courier New', monospace;
    text-align: center;
    background-color: #fff3e0;
    color: #e65100;
}

/* 资费列样式 */
.area-grouped-table .freight-cell {
    font-family: 'Courier New', monospace;
    text-align: center;
    background-color: #e8f5e8;
    color: #2e7d32;
    font-weight: 600;
}

/* 操作列样式 */
.area-grouped-table .action-cell {
    text-align: center;
    background-color: #fafafa;
}

/* 行样式 */
.area-grouped-table .area-first-row {
    border-top: 2px solid #007bff;
}

.area-grouped-table .area-follow-row {
    /* 跟随行的样式 */
}

.area-grouped-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* 表格内按钮样式调整 */
.area-grouped-table .btn-small {
    padding: 4px 8px;
    font-size: 12px;
    margin: 0 2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .area-grouped-table {
        font-size: 12px;
    }
    
    .area-grouped-table th,
    .area-grouped-table td {
        padding: 8px;
    }
    
    .display-mode-switch {
        flex-direction: column;
        gap: 5px;
    }
    
    .display-mode-switch .btn {
        width: 100%;
    }
}

/* 策略区域配置页面样式 */
.area-config-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    height: calc(100vh - 300px);
    min-height: 600px;
}

/* 左侧：区域列表 */
.area-config-sidebar {
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.area-config-sidebar .sidebar-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.area-config-sidebar .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.area-list {
    padding: 0;
}

.area-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f7fa;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-item:hover {
    background-color: #f5f7fa;
}

.area-item.selected-area {
    background-color: #ecf5ff;
    border-left: 3px solid #409eff;
    color: #409eff;
}

.area-name {
    font-weight: 500;
    font-size: 14px;
}

.area-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.area-status.configured {
    background-color: #f0f9ff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.area-status.unconfigured {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* 中间：计算规则 */
.area-config-center {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.area-config-center .center-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-config-center .center-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.config-form .form-group {
    margin-bottom: 20px;
}

.config-form .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #606266;
}

.config-form .form-input {
    width: 100%;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.config-form .form-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.config-form .form-input:disabled {
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
}

.config-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #909399;
    font-size: 14px;
    background-color: #fafbfc;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
}

/* 右侧：重量区间规则 */
.area-config-right {
    width: 350px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.area-config-right .right-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.area-config-right .right-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.weight-rules-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    color: #909399;
    font-size: 14px;
    background-color: #fafbfc;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
}

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #909399;
    font-size: 16px;
}

.empty-state p {
    margin: 0;
}

/* 按钮组样式 */
.center-actions, .right-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.center-actions .btn, .right-actions .btn {
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .area-config-layout {
        flex-direction: column;
        height: auto;
    }
    
    .area-config-sidebar, .area-config-right {
        width: 100%;
    }
    
    .area-config-center {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .area-config-layout {
        gap: 15px;
        margin-top: 15px;
    }
    
    .area-config-sidebar .sidebar-content,
    .area-config-center .center-content,
    .area-config-right .right-content {
        padding: 15px;
    }
    
    .config-form .form-input {
        max-width: 100%;
    }
}

/* 策略列表编辑按钮样式 */
.strategy-item-with-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #f5f7fa;
    transition: all 0.3s ease;
}

.strategy-item-with-edit:hover {
    background-color: #f8f9fa;
}

.strategy-item-with-edit.selected-strategy {
    background-color: #ecf5ff;
    border-left: 3px solid #409eff;
}

.strategy-info {
    flex: 1;
    cursor: pointer;
    padding: 4px 0;
}

.strategy-edit-btn {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    background-color: #409eff;
    color: white;
    border: 1px solid #409eff;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.strategy-edit-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.strategy-edit-btn:active {
    background-color: #3a8ee6;
    border-color: #3a8ee6;
}

/* 表格配置列样式 */
.config-cell {
    background-color: #f0f9ff;
    color: #1e40af;
    font-weight: 500;
    text-align: center;
    border-right: 1px solid #e0e7ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .strategy-item-with-edit {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .strategy-edit-btn {
        align-self: flex-end;
        margin-left: 0;
    }
}

/* 策略编辑模态框布局样式 */
.strategy-edit-modal {
    max-width: 1600px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

.strategy-edit-layout {
    display: flex;
    gap: 30px;
    min-height: 600px;
}

/* 左侧运送区域 */
.shipping-areas-section {
    flex: 0 0 45%;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.shipping-areas-section h4 {
    margin: 0 0 20px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

/* 右侧计费规则 */
.pricing-rules-section {
    flex: 1;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.pricing-rules-section h4 {
    margin: 0 0 20px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

/* 紧凑型区域选择器 */
.area-selector-panel-compact {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 500px;
    overflow: hidden;
}

.area-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.area-selector-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.cascader-panel-compact {
    display: flex;
    height: 350px;
}

.cascader-column-compact {
    flex: 1;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.cascader-column-compact:last-child {
    border-right: none;
}

.cascader-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.cascader-options-compact {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.cascader-option-compact {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 1px 0;
    transition: background-color 0.2s;
}

.cascader-option-compact:hover {
    background-color: #f5f7fa;
}

.cascader-option-compact.has-children {
    font-weight: 500;
}

.cascader-option-compact.indeterminate {
    background-color: #fff3cd;
}

.cascader-option-compact .cascader-checkbox {
    margin-right: 6px;
    scale: 0.9;
}

.cascader-option-compact .cascader-option-label {
    flex: 1;
    line-height: 1.2;
}

.btn.btn-tiny {
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 3px;
    min-width: auto;
}

/* 区域标签显示优化 */
.selected-areas-display {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: white;
}

.selected-areas-tags {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.area-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 12px;
    font-size: 12px;
    color: #1890ff;
    max-width: 200px;
}

.area-tag.province {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
}

.area-tag.city {
    background-color: #fff7e6;
    border-color: #ffd591;
    color: #fa8c16;
}

.area-tag.district {
    background-color: #f9f0ff;
    border-color: #d3adf7;
    color: #722ed1;
}

.tag-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-remove-btn {
    margin-left: 4px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.tag-remove-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* 计费规则表格优化 */
.pricing-rules-editor {
    background: white;
    border-radius: 6px;
    padding: 16px;
    border: 1px solid #e9ecef;
}

.pricing-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 16px;
}

.pricing-edit-table th {
    background-color: #f8f9fa;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    font-size: 11px;
}

.pricing-edit-table td {
    padding: 4px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.pricing-edit-table .table-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 11px;
    text-align: center;
}

.pricing-edit-table .table-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
}

.rule-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.form-hint {
    color: #6c757d;
    font-size: 11px;
    margin: 0;
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .strategy-edit-layout {
        flex-direction: column;
        gap: 20px;
    }
    
    .shipping-areas-section,
    .pricing-rules-section {
        flex: none;
    }
}

@media (max-width: 768px) {
    .strategy-edit-modal {
        width: 98vw;
        max-height: 95vh;
    }
    
    .cascader-panel-compact {
        height: 300px;
    }
    
    .pricing-edit-table {
        font-size: 10px;
    }
    
    .pricing-edit-table th,
    .pricing-edit-table td {
        padding: 3px 2px;
    }
}

/* ================================ V3策略编辑模态框专用样式 ================================ */

.v3-strategy-edit-modal {
    max-width: 1200px;
    width: 95vw;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}

.v3-strategy-edit-layout {
    display: flex;
    gap: 24px;
    padding: 20px;
    min-height: 500px;
}

/* V3左侧区域选择器 */
.v3-areas-selector {
    width: 400px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fafbfc;
    overflow: hidden;
}

.v3-areas-selector h5 {
    margin: 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    border-bottom: 1px solid #e6e8eb;
    font-size: 14px;
    font-weight: 600;
    color: #1f2329;
}

/* V3右侧计费规则编辑 */
.v3-pricing-rules-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.v3-pricing-rules-section h4 {
    margin: 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    border-bottom: 1px solid #e6e8eb;
    font-size: 14px;
    font-weight: 600;
    color: #1f2329;
}

.v3-pricing-rules-editor {
    flex: 1;
    padding: 16px 20px;
    overflow: auto;
}

.v3-pricing-edit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    background: white;
}

.v3-pricing-edit-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    color: #4e5969;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
    padding: 10px 6px;
    border-bottom: 1px solid #e6e8eb;
    border-right: 1px solid #e6e8eb;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.v3-pricing-edit-table th:last-child {
    border-right: none;
}

.v3-pricing-edit-table td {
    padding: 8px 4px;
    text-align: center;
    border-bottom: 1px solid #f5f7fa;
    border-right: 1px solid #f5f7fa;
    vertical-align: middle;
    background: white;
}

.v3-pricing-edit-table td:last-child {
    border-right: none;
}

.v3-pricing-edit-table tbody tr:last-child td {
    border-bottom: none;
}

.v3-pricing-edit-table .table-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #e6e8eb;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    background: white;
    transition: all 0.2s ease;
}

.v3-pricing-edit-table .table-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* V3区域选择器模态框 */
.v3-area-selector-modal {
    max-width: 800px;
    width: 90vw;
    max-height: 80vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}

.v3-area-selector-content {
    padding: 20px;
    max-height: 60vh;
    overflow: auto;
}

.v3-area-selector-actions {
    padding: 16px 20px;
    border-top: 1px solid #e6e8eb;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* V3区域选择器三级联动样式 */
.v3-cascader-panel {
    display: flex;
    gap: 20px;
    min-height: 400px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.v3-cascader-column {
    flex: 1;
    min-width: 200px;
    border-right: 1px solid #e6e8eb;
    display: flex;
    flex-direction: column;
}

.v3-cascader-column:last-child {
    border-right: none;
}

.v3-cascader-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e6e8eb;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.v3-cascader-options {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.v3-cascader-option {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.v3-cascader-option:hover {
    background: #f8f9fa;
}

.v3-cascader-option input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

.v3-option-label {
    flex: 1;
    font-size: 14px;
    color: #333;
    user-select: none;
}

.expand-btn {
    background: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
}

.expand-btn:hover {
    background: #337ecc;
}

/* V3选中区域预览 */
.v3-selected-preview {
    margin-top: 20px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #b3d8ff;
    border-radius: 8px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.selected-count {
    background: #409eff;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.selected-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.selected-summary span {
    background: white;
    color: #409eff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #b3d8ff;
}

@media (max-width: 1200px) {
    .v3-strategy-edit-layout {
        flex-direction: column;
        gap: 16px;
    }
    
    .v3-areas-selector {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .v3-strategy-edit-modal {
        width: 98vw;
        max-height: 95vh;
    }
    
    .v3-pricing-edit-table {
        font-size: 10px;
    }
    
    .v3-pricing-edit-table th,
    .v3-pricing-edit-table td {
        padding: 6px 3px;
    }
}

/* ================================ V3计费规则编辑模态框样式 ================================ */

.v3-pricing-rules-modal {
    max-width: 900px;
    width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}

.v3-pricing-rules-content {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.pricing-form-section {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fafbfc;
}

.pricing-form-section h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2329;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e8eb;
}

.pricing-form-section .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.pricing-form-section .form-group {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h4 {
    margin: 0;
    border: none;
    padding: 0;
}

.weight-rules-table {
    background: white;
    border-radius: 6px;
    border: 1px solid #e6e8eb;
    /* 修复：确保重量区间规则表格能完整显示所有数据 */
    overflow: visible;
    max-height: none;
}

.v3-pricing-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.v3-pricing-edit-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);
    color: #4e5969;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #e6e8eb;
    border-right: 1px solid #e6e8eb;
}

.v3-pricing-edit-table th:last-child {
    border-right: none;
}

.v3-pricing-edit-table td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #f5f7fa;
    border-right: 1px solid #f5f7fa;
    vertical-align: middle;
    background: white;
}

.v3-pricing-edit-table td:last-child {
    border-right: none;
}

.v3-pricing-edit-table tbody tr:last-child td {
    border-bottom: none;
}

.v3-pricing-edit-table .table-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #e6e8eb;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    background: white;
    transition: all 0.2s ease;
    min-width: 60px;
}

.v3-pricing-edit-table .table-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.empty-rules {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    background: #fafbfc;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
}

.empty-rules p {
    margin: 0;
    font-size: 14px;
}

.v3-pricing-rules-actions {
    padding: 16px 20px;
    border-top: 1px solid #e6e8eb;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 768px) {
    .v3-pricing-rules-modal {
        width: 98vw;
        max-height: 95vh;
    }
    
    .pricing-form-section .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .v3-pricing-edit-table {
        font-size: 10px;
    }
    
    .v3-pricing-edit-table th,
    .v3-pricing-edit-table td {
        padding: 6px 4px;
    }
    
    .v3-pricing-edit-table .table-input {
        padding: 4px 6px;
        font-size: 10px;
        min-width: 50px;
    }
}

/* ================================ 策略编辑弹框样式 ================================ */

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        background: rgba(0, 0, 0, 0);
    }
    to {
        opacity: 1;
        background: rgba(0, 0, 0, 0.6);
    }
}

/* 模态框遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.3s ease-out;
}

/* 策略编辑弹框容器 */
.strategy-edit-modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    width: 98vw;
    max-width: 1600px;
    max-height: 95vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 弹框头部 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e6e8eb;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 弹框内容 */
.modal-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
    /* 移除最大高度限制，确保内容可以完整显示 */
}

/* 策略基本信息区域 */
.strategy-basic-info {
    margin-bottom: 32px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e6e8eb;
}

.strategy-basic-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #409eff;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 500;
    color: #606266;
    margin-bottom: 6px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

/* 地区管理区域 */
.area-management-section {
    margin-bottom: 24px;
}

.area-management-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #67c23a;
}

/* 地区定价表格容器 */
.area-table-container {
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

/* 标记为删除的行样式 */
.marked-for-deletion {
    background-color: #ffebee !important;
    opacity: 0.6 !important;
}

.marked-for-deletion input,
.marked-for-deletion select {
    background-color: #fafafa !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

/* 已确认的新规则行样式 */
.confirmed-new-rule {
    background-color: #f0f9ff !important;
    border: 1px solid #67c23a !important;
}

.confirmed-new-rule input,
.confirmed-new-rule select {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

.status-text {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.text-success {
    color: #67c23a;
    background-color: #f0f9ff;
}

/* 地区定价表格 */
.area-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.area-pricing-table th {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ebef 100%);
    color: #606266;
    font-weight: 600;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid #e6e8eb;
    font-size: 12px;
    white-space: nowrap;
}

.area-pricing-table td {
    padding: 8px;
    border: 1px solid #e6e8eb;
    text-align: center;
    vertical-align: middle;
}

/* 地区单元格 */
.area-cell {
    background: #f8f9fa;
    font-weight: 500;
    border-right: 2px solid #409eff !important;
}

.area-name {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #303133;
}

/* 输入框样式 */
.range-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.weight-input,
.fee-input {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
}

.weight-input:focus,
.fee-input:focus {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.3);
}

.range-separator {
    font-size: 10px;
    color: #909399;
    margin: 0 2px;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.btn-mini {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    min-width: 20px;
    height: 20px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-mini.btn-success {
    background: #67c23a;
    color: white;
}

.btn-mini.btn-success:hover {
    background: #5daf34;
}

.btn-mini.btn-danger {
    background: #f56c6c;
    color: white;
}

.btn-mini.btn-danger:hover {
    background: #f26969;
}

/* 无数据状态 */
.no-data {
    text-align: center;
    padding: 40px 20px;
    color: #909399;
    background: #f8f9fa;
}

/* 添加地区行 */
.add-area-row td {
    text-align: center;
    padding: 16px;
    background: #fafbfc;
}

/* 弹框底部 */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e6e8eb;
    background: #fafbfc;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .strategy-edit-modal {
        width: 95vw;
        max-height: 95vh;
    }
    
    .area-pricing-table {
        font-size: 10px;
    }
    
    .weight-input,
    .fee-input {
        width: 50px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .modal-content {
        padding: 16px;
    }
    
    .strategy-basic-info {
        padding: 16px;
    }
    
    .area-pricing-table th,
    .area-pricing-table td {
        padding: 6px 4px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================== */
/* V3版本策略编辑弹框增强样式 */
/* =================================== */

/* 策略信息显示区域 */
.strategy-info-display {
    margin-bottom: 20px;
}

.info-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #667eea;
}

.info-card h4 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item .label {
    font-weight: 500;
    color: #666;
    min-width: 70px;
    font-size: 13px;
}

.info-item .value {
    background: linear-gradient(135deg, #f0f9ff, #e1f3ff);
    color: var(--color-success);
    border: 1px solid #b3e5fc;
}

.info-item .status-active {
    color: #28a745;
    font-weight: 500;
}

.info-item .status-inactive {
    color: #dc3545;
    font-weight: 500;
}

/* 配置区域样式增强 */
.config-section {
    background: white;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 表格样式增强 */
.config-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 12px;
}

.config-table th {
    background: #f8f9fa;
    padding: 10px 6px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    font-size: 12px;
}

.config-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

/* 空状态样式 */
.empty-cell {
    text-align: center;
    padding: 40px 20px !important;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #6c757d;
}

.empty-state i {
    font-size: 48px;
    color: #dee2e6;
}

.empty-state p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.empty-hint {
    font-size: 14px !important;
    color: #adb5bd !important;
    font-weight: normal !important;
}

.loading-cell {
    text-align: center;
    padding: 20px !important;
    color: #6c757d;
    font-style: italic;
}

/* 地区信息样式增强 */
.area-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.area-name {
    font-weight: 600;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
}

.area-list {
    font-size: 11px;
    color: #6c757d;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    /* 允许完整显示地区信息，不限制宽度 */
}

/* 表格输入框样式增强 */
.table-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    transition: all 0.2s;
    background: white;
    text-align: center;
}

.table-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.table-input.modified {
    border-color: #ffc107;
    background: #fff9e6;
}

.table-input.error {
    border-color: #dc3545;
    background: #fff5f5;
}

.weight-input {
    max-width: 70px;
}

.fee-input {
    max-width: 80px;
}

/* 状态标识样式 */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 操作按钮样式增强 */
.action-buttons {
    display: flex;
    gap: 3px;
    justify-content: center;
}

.btn-small {
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    line-height: 1;
    min-width: 24px;
    height: 24px;
    justify-content: center;
}

.btn-small.btn-primary {
    background: #667eea;
    color: white;
}

.btn-small.btn-primary:hover {
    background: #5a6fd8;
    transform: translateY(-1px);
}

.btn-small.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-small.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.btn-small.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-small.btn-danger:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* 应用区域显示样式 */
.apply-areas {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

/* 图标样式 */
.icon-plus::before { content: '+'; }
.icon-edit::before { content: '✏️'; }
.icon-delete::before { content: '🗑️'; }
.icon-save::before { content: '💾'; }
.icon-location::before { content: '📍'; }
.icon-weight::before { content: '⚖️'; }
.icon-info::before { content: 'ℹ️'; }

/* ========================================= */
/* 策略编辑弹框强制样式修复 - 最高优先级 */
/* ========================================= */

/* 强制修复弹框显示问题 - 使用更高优先级 */
body #strategy-edit-modal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
}

body #strategy-edit-modal .strategy-edit-modal {
    width: 98vw !important;
    max-width: 1800px !important;
    max-height: 95vh !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body #strategy-edit-modal .modal-content {
    flex: 1 !important;
    overflow-y: auto !important;
    /* 移除最大高度限制，确保重量区间规则表格可以完整显示 */
    padding: 20px !important;
    background: #f8f9fa !important;
}

/* 确保表格和内容区域正常显示 */
body #strategy-edit-modal .config-section {
    margin-bottom: 24px !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

body #strategy-edit-modal .config-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 12px !important;
}

body #strategy-edit-modal .config-table th,
body #strategy-edit-modal .config-table td {
    border: 1px solid #e6e8eb !important;
    padding: 8px 12px !important;
    text-align: left !important;
}

/* 确保弹框在最顶层 */
#strategy-edit-modal {
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 配置表格数据完整显示修复 */
.config-section {
    margin-bottom: 24px !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    /* 确保配置部分不被截断 */
    overflow: visible !important;
    max-height: none !important;
}

.config-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 12px !important;
    /* 确保表格数据完整显示 */
    overflow: visible !important;
    max-height: none !important;
}

/* 重量区间配置表格特别优化 */
.weight-rules-section {
    /* 确保重量区间配置部分可以完整显示 */
    overflow: visible !important;
    max-height: none !important;
}

.weight-rules-section .weight-rules-table {
    /* 确保重量区间表格数据不被隐藏 */
    overflow: visible !important;
    max-height: none !important;
}

.weight-rules-section .config-table tbody {
    /* 确保表格体内容完整显示 */
    overflow: visible !important;
    max-height: none !important;
}

#strategy-edit-modal .strategy-edit-modal {
    background: white !important;
    border-radius: 16px !important;
    width: 95vw !important;
    max-width: 1600px !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    transform: none !important;
}

#strategy-edit-modal .modal-content {
    flex: 1 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: #f8f9fa !important;
    max-height: calc(90vh - 140px) !important;
    margin: 0 !important;
}

/* ========================================= */
/* 策略编辑弹框响应式设计增强 */
/* ========================================= */

/* 超大屏幕优化 */
@media (min-width: 1600px) {
    .strategy-edit-modal {
        max-width: 1800px;
        width: 90vw;
    }
}

/* 大屏幕优化 */
@media (max-width: 1400px) {
    .strategy-edit-modal {
        width: 96vw;
        max-width: 1400px;
    }
    
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* 中等屏幕优化 */
@media (max-width: 1200px) {
    .strategy-edit-modal {
        width: 95vw;
        max-width: 1200px;
    }
    
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    
    .config-table {
        font-size: 11px;
    }
    
    .config-table th,
    .config-table td {
        padding: 6px 4px;
    }
}

/* 平板屏幕优化 */
@media (max-width: 992px) {
    .strategy-edit-modal {
        width: 96vw;
        max-height: 94vh;
    }
    
    .modal-content {
        padding: 16px;
    }
    
    .info-card {
        padding: 12px;
    }
    
    .section-header {
        padding: 10px 12px;
    }
    
    .section-header h3 {
        font-size: 13px;
    }
}

/* 小屏幕/手机优化 */
@media (max-width: 768px) {
    .strategy-edit-modal {
        width: 98vw;
        max-height: 96vh;
    }
    
    .modal-content {
        padding: 12px;
        max-height: calc(96vh - 120px);
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .info-card h4 {
        font-size: 14px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        padding: 10px 12px;
    }
    
    .config-table th,
    .config-table td {
        padding: 4px 2px;
        font-size: 10px;
    }
    
    .weight-input,
    .fee-input {
        max-width: 50px;
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .area-list {
        font-size: 10px;
        max-width: 120px;
    }
    
    .area-name {
        font-size: 11px;
    }
    
    .btn-small {
        min-width: 20px;
        height: 20px;
        padding: 2px 4px;
        font-size: 10px;
    }
}

/* 极小屏幕优化 */
@media (max-width: 480px) {
    .strategy-edit-modal {
        width: 99vw;
        max-height: 98vh;
    }
    
    .modal-content {
        padding: 8px;
    }
    
    .info-card {
        padding: 8px;
    }
    
    .section-header {
        padding: 8px;
    }
    
    .config-table th,
    .config-table td {
        padding: 2px 1px;
        font-size: 9px;
    }
    
    .area-list {
        max-width: 100px;
        font-size: 9px;
    }
    
    .weight-input,
    .fee-input {
        max-width: 40px;
        font-size: 9px;
    }
}